<template>
  <div class="app-container">
    <div class="header">
      <el-button type="primary" plain size="small" @click="handleAdd"
        >新增环境光谱</el-button
      >
      <el-button type="primary" plain size="small" @click="handleAdd"
        >新增明细</el-button
      >
      <el-button type="primary" plain size="small" @click="handleAdd"
        >重置明细</el-button
      >
      <el-button type="primary" plain size="small" @click="handleAdd"
        >删除明细</el-button
      >
      <el-button type="primary" plain size="small" @click="handleViewHistory"
        >提交</el-button
      >
      <el-button type="primary" plain size="small" @click="handleViewHistory"
        >关闭</el-button
      >
    </div>
    <!-- 基本信息 -->
    <el-card class="base-box-card" shadow="never">
      <div slot="header" class="card-header">基本信息</div>
      <el-row :gutter="2">
        <el-col :span="4">建模数据编号：{{ baseInfo.modelId }}</el-col>
        <el-col :span="3">建模数据状态：{{ baseInfo.status }} </el-col>
        <el-col :span="2">成分：{{ baseInfo.constituent }}</el-col>
        <el-col :span="2">部门：{{ baseInfo.department }}</el-col>
        <el-col :span="4">仪器编号：{{ baseInfo.instrumentNo }}</el-col>
        <el-col :span="3">仪器名称：{{ baseInfo.instrumentName }}</el-col>
        <el-col :span="3">数据构建人：{{ baseInfo.creator }}</el-col>
        <el-col :span="3">采样时间：{{ baseInfo.sampleTime }}</el-col>
      </el-row>
    </el-card>
    <el-row class="main-row" :gutter="20">
      <el-col class="left-size">
        <!-- 环境光谱信息 -->
        <el-card class="env-box-card" shadow="never" style="margin-top: 5px">
          <div slot="header" class="card-header">环境光谱</div>
          <el-table :data="[envSpectrum]" border style="width: 100%">
            <el-table-column prop="envNo" label="环境光谱编号" />
            <el-table-column prop="productTime" label="生产车间" />
            <el-table-column prop="instrumentNo" label="仪器编号" />
            <el-table-column prop="instrumentName" label="仪器名称" />
            <el-table-column prop="sampleTime" label="采样时间" />
            <el-table-column label="操作">
              <template #default>
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">波长</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <!-- 明细列表 -->
        <el-card class="box-card" shadow="never" style="margin-top: 5px">
          <div slot="header" class="card-header">明细列表</div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="detailId" label="建模数据详细编号" />
            <el-table-column prop="modelId" label="建模数据编号" />
            <el-table-column prop="standardValue" label="标准值%" />
            <el-table-column prop="dataType" label="数据划分">
              <template #default="scope">
                <el-tag :type="dataTypeTag(scope.row.dataType)">{{
                  scope.row.dataType
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === '删除' ? 'danger' : 'success'"
                >
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default>
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">波长</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
            :page-size="10"
            style="margin-top: 10px"
          />
        </el-card>
      </el-col>
      <el-col class="right-size">
        <el-row :gutter="20" style="margin-top: 20px">
          <el-row >
            <el-card shadow="never">
              <el-form >
                <el-form-item label="异常剔除方法">
                  <el-select placeholder="请选择"></el-select>
                </el-form-item>
                <el-form-item label="交叉验证比例">
                  <el-select placeholder="请选择"></el-select>
                </el-form-item>
                <el-form-item label="数据划分方法">
                  <el-select placeholder="请选择"></el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">处理</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-row>

          <el-row >
            <el-card shadow="never">
              <div>吸光度曲线</div>
              <div id="absorbance-chart" style="height: 200px"></div>
              <!-- <div style="margin-top: 20px">异常剔除散点图</div> -->
              <!-- <div id="scatter-chart" style="height: 200px"></div> -->
            </el-card>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseInfo: {
        modelId: "CON202503300001",
        status: "暂存",
        constituent: "水",
        department: "制粒车间",
        instrumentNo: "INS202503300001",
        instrumentName: "光谱仪器1",
        creator: "系统管理员",
        sampleTime: "2025/03/30 14:00:00",
      },
      envSpectrum: {
        envNo: "ES202503300001",
        productTime: "制粒车间",
        instrumentNo: "INS202503300001",
        instrumentName: "光谱仪器1",
        sampleTime: "2025/03/23 19:34:00",
      },
      tableData: [
        {
          detailId: "COND202503300001",
          modelId: "CON202503300001",
          standardValue: 7.56,
          dataType: "校正集",
          status: "删除",
        },
        {
          detailId: "COND202503300002",
          modelId: "CON202503300001",
          standardValue: 7.56,
          dataType: "校正集",
          status: "正常",
        },
        {
          detailId: "COND202503300003",
          modelId: "CON202503300001",
          standardValue: 7.56,
          dataType: "校正集",
          status: "正常",
        },
        {
          detailId: "COND202503300004",
          modelId: "CON202503300001",
          standardValue: 7.56,
          dataType: "验证集",
          status: "正常",
        },
        {
          detailId: "COND202503300005",
          modelId: "CON202503300001",
          standardValue: 7.56,
          dataType: "验证集",
          status: "正常",
        },
        // {
        //   detailId: "COND202503300006",
        //   modelId: "CON202503300001",
        //   standardValue: 7.56,
        //   dataType: "验证集",
        //   status: "正常",
        // },
        // {
        //   detailId: "COND202503300007",
        //   modelId: "CON202503300001",
        //   standardValue: 7.56,
        //   dataType: "验证集",
        //   status: "正常",
        // },
        // {
        //   detailId: "COND202503300008",
        //   modelId: "CON202503300001",
        //   standardValue: 7.56,
        //   dataType: "验证集",
        //   status: "正常",
        // },
      ],
    };
  },
  methods: {
    dataTypeTag(type) {
      switch (type) {
        case "校正集":
          return "primary";
        case "验证集":
          return "warning";
        default:
          return "";
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.header {
  /* display: flex; */
  justify-content: space-around;
}
.box-card {
  margin-top: 5px;
  height: 500px;
}
.base-box-card {
  margin-top: 5px;
  font-size: 14px;
}
.env-box-card {
  margin-top: 5px;
  font-size: 14px;
}
.card-header {
  font-weight: bold;
  font-size: 16px;
}
.main-row {
  width: 100%;
  height: 50%;
}
.left-size {
  width: 70%;
}
.right-size {
  width: 30%;
}
</style>
